import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Popover, PopoverTrigger, PopoverContent } from '../../components/ui/popover';
import { Button } from '../../components/ui/button';

const meta: Meta<typeof Popover> = {
  title: 'UI/Popover',
  component: Popover,
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof Popover>;

export const Default: Story = {
  render: () => (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">点击打开</Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <div className="grid gap-4">
          <div className="space-y-2">
            <h4 className="font-medium leading-none">弹出层标题</h4>
            <p className="text-sm text-muted-foreground">
              这是一个弹出层内容示例，可以包含任何内容。
            </p>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  ),
};

export const WithForm: Story = {
  render: () => (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">编辑个人资料</Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <div className="grid gap-4">
          <div className="space-y-2">
            <h4 className="font-medium leading-none">个人资料</h4>
            <p className="text-sm text-muted-foreground">
              更新您的个人信息。
            </p>
          </div>
          <div className="grid gap-2">
            <div className="grid grid-cols-3 items-center gap-4">
              <label htmlFor="width" className="text-right text-sm">姓名</label>
              <input
                id="width"
                defaultValue="张三"
                className="col-span-2 h-8 rounded-md border px-3"
              />
            </div>
            <div className="grid grid-cols-3 items-center gap-4">
              <label htmlFor="maxWidth" className="text-right text-sm">邮箱</label>
              <input
                id="maxWidth"
                defaultValue="zhangsan@example.com"
                className="col-span-2 h-8 rounded-md border px-3"
              />
            </div>
          </div>
          <Button size="sm">保存更改</Button>
        </div>
      </PopoverContent>
    </Popover>
  ),
};

export const WithAlignment: Story = {
  render: () => (
    <div className="flex items-center justify-center space-x-4">
      <Popover>
        <PopoverTrigger asChild>
          <Button variant="outline">左对齐</Button>
        </PopoverTrigger>
        <PopoverContent align="start" className="w-60">
          <p>这是左对齐的弹出层内容。</p>
        </PopoverContent>
      </Popover>
      
      <Popover>
        <PopoverTrigger asChild>
          <Button variant="outline">居中对齐</Button>
        </PopoverTrigger>
        <PopoverContent align="center" className="w-60">
          <p>这是居中对齐的弹出层内容。</p>
        </PopoverContent>
      </Popover>
      
      <Popover>
        <PopoverTrigger asChild>
          <Button variant="outline">右对齐</Button>
        </PopoverTrigger>
        <PopoverContent align="end" className="w-60">
          <p>这是右对齐的弹出层内容。</p>
        </PopoverContent>
      </Popover>
    </div>
  ),
};
